/* 公共样式 */
.clearfix::before,
.clearfix::after{
    content: '';
    display: table;
    clear: both;
}

/* 去除a的下划线 */
a{
    text-decoration: none;
    color: #333;
}

body{
    font:14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
    color: #333;
}

h2 {
    text-align: center;
    font-size: 60px;
    font-weight: bold;
}


.w{
    margin-top: 250px;
    margin-bottom: 100px;
    padding-left: 126px;
    padding-right: 126px;
    
}

/*顶部导航栏*/
.topbar-wrapper {
    width: 100%;
    height: 110px;
    line-height: 110px;
    background-color: #FFF;
    border-radius: 1%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    transition: 0.3s;

    /*设置为固定定位*/
    position: fixed;

    left: 0;
    top: 0;
    z-index: 99999;



    /* 左侧文字logo*/
    .logo {
        margin-left: 125px;
        float: left;

        h1 {
            font-size: 28px;
            font-weight: bold;
            color: #333;
        }
    }


    /* 右侧菜单*/
    .right-menu {
        margin-right: 125px;
        float: right;
        margin-right: 70px;


        li {
            overflow: hidden;
            position: relative;
            padding: 0 10px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            float: left;
            margin-left: 25px;

            a {
                color: #555;
            }

            p {
                position: absolute;
                width: 0;
                height: 4px;
                bottom: 25%;
                left: -20%;
                background-color: #bfa;
                border-radius: 50%;
                transition: 0.5s;
            }

            &:hover p {
                width: 140%;
                background-color: red;

            }

        }


        .active {
            width: 140%;
            background-color: red;
        }

    }


}

// 导航箭头
.down{
    transform: translateX(-50%);
    left: 50%;
    width: 100px;
    height: 100px;
    position: absolute;
    background-size: 100%;
    background-image: url(../img/双箭头下.png);
    bottom: 180px;
    animation: down 1s  infinite alternate ;
}



// 标题（笔记和兴趣爱好页）
.title {
    margin-top: 2%;
    padding-top: 2%;
    padding-left: 10vw;
    padding-bottom: 2%;
    background-color: skyblue;

    h2 {
        text-align: left;
        font-size: 80px;
        color: #FFF;
    }

}


@keyframes down{
    100%{
        bottom: 140px;
        opacity: 1;
    }

    0%{
        bottom: 80px;
        opacity: 0;
    }
}



// 版权 
.banquan{
    width: 100%;
    height: 200px;
    background-color: rgb(37,33,32);

    padding-top: 60px;

    p{
        font-size: 24px;
        text-align: center;
        color: #FFF;
        margin-top: 20px;
    }
}


.chilun{
    display: inline-block;
    // float: left;
    width: 80px;
    height: 80px;
    // background-color: #bfa;
    background-image: url(../img/设置.png);
    background-size: cover;
    // 设置动画名
    animation-name: example;
    // 动画的时间
    animation-duration: 2s;
    // transform: rotate(240deg);
    // 运行次数
    animation-iteration-count: infinite;
    
    // animation-direction: reverse;
}

// 齿轮动画
@keyframes example {
    0%   {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
  }